<template>
<!-- 公募十大流通股东 -->
    <div class="public-container">
        <div class="main">
            <!-- <div class="query-content">
                <el-radio-group
                    v-model="orgType"
                    @change="radioChange"
                    class="custom-radio-group"
                >
                    <el-radio :label="1">公募</el-radio>
                    <el-radio :label="2">社保</el-radio>
                    <el-radio :label="3">保险资金</el-radio>
                </el-radio-group>
                <span class="label">报告期</span>
                <el-select
                    v-model="endDate"
                    size="small"
                    popper-class="custom-popper-class"
                    placeholder="请选择"
                    @change="selectChange"
                >
                    <el-option
                        v-for="(item, i) in timeList"
                        :key="i"
                        :label="item.YEAR + '年第' + item.QUARTER + '季度'"
                        :value="item.endDate"
                    >
                        <span>{{
                            item.YEAR + "年第" + item.QUARTER + "季度"
                        }}</span>
                    </el-option>
                </el-select>
                <el-select
                    v-model="blockName"
                    size="small"
                    popper-class="custom-popper-class"
                    style="margin-left: 10px"
                    placeholder="请选择板块"
                    @change="(stockInfo='',selectStockInfo=null, selectChange())"
                >
                    <el-option
                        v-for="(item, i) in blockNameList"
                        :key="i"
                        :label="item"
                        :value="item"
                    >
                    </el-option>
                </el-select>
                <el-autocomplete
                    v-model="stockInfo"
                    size="small"
                    style="width: 310px; margin: 0 14px 0 10px"
                    popper-class="custom-popper-class"
                    :fetch-suggestions="querySearchAsync"
                    placeholder="请输入板块名称或股票名称代码"
                    @select="handleSelect"
                >
                    <span
                        slot="append"
                        @click.stop="(marketCode = ''), toQuery()"
                        >搜 索</span
                    >
                </el-autocomplete>
                <span @click="toQuery('clear')" class="reset">重置</span>
            </div> -->
            <div class="table-content">
                
                <div > 
                    <table
                        
                        border="0"
                        bgcolor="#33343B"
                        cellpadding="0"
                        class="table-box table-box2"
                        align="center"
                        style="border-collapse: collapse"
                    >
                        <tr class="title">
                            <td class="title-td">十大流通股东</td>
                        </tr>
                        <tr class="table-tr">
                            <td  valign="top" class="holder-td">
                                <div v-if="tenShareholder.length > 0">
                                    <div class="holder holder-head">
                                        <span class="head-1">序号</span>
                                        <span></span>
                                        <span>股东名称</span>
                                        <span>持股量</span>
                                    </div>
                                    <div
                                        v-for="(val, i) in tenShareholder"
                                        :key="i"
                                        class="holder holder-item"
                                    >
                                        <span>{{ i + 1 }}</span>
                                        <span>
                                            <span
                                                :class="[
                                                    'org-label',
                                                    ['007', '703'].includes(
                                                        val.orgType
                                                    )
                                                        ? 'org-1'
                                                        : [
                                                            '026',
                                                            '701',
                                                            '702',
                                                        ].includes(val.orgType)
                                                        ? 'org-2'
                                                        : ['003', '714'].includes(
                                                            val.orgType
                                                        )
                                                        ? 'org-3'
                                                        : '',
                                                ]"
                                            >
                                                {{
                                                    ["007", "703"].includes(
                                                        val.orgType
                                                    )
                                                        ? "公募"
                                                        : [
                                                            "026",
                                                            "701",
                                                            "702",
                                                        ].includes(val.orgType)
                                                        ? "社保"
                                                        : ["003", "714"].includes(
                                                            val.orgType
                                                        )
                                                        ? "保险"
                                                        : ""
                                                }}
                                            </span>
                                        </span>
                                        <span
                                            :class="['color-' + val.originalNum]"
                                            >{{ val.name }}</span
                                        >
                                        <span class="turquoise">{{
                                            val.holdNum | setData
                                        }}</span>
                                    </div>
                                </div>
                                <div v-else class="no-data">暂无数据</div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            
        </div>
    </div>
</template>

<script>
import {getUrlParams} from "../../../common/common";
const {version,endDate,stockCode} = getUrlParams();
import {
    getCirStockHolderList,
    
} from "../api/index";

export default {
    name: "holder",
    data() {
        return {
            version, // 添加演示版本判断
            endDate,
            stockCode,
            tenShareholder: [],
        };
    },
    created() {
        this.getCirStockHolderList();
    },
    filters: {
        fixed2(val) {
            return Number(val).toFixed(2);
        },
    },
    methods: {
        // 通过股票代码报告期查询相关十大流通股
        getCirStockHolderList() {
            let param = {
                stockCode: this.stockCode,
                endDate: this.endDate,
            };
            getCirStockHolderList(param).then((res) => {
                this.tenShareholder = res.data || [];
            });
        },
        
        
    },
};
</script>
<style lang="scss">
html,
body,
.container {
    width: 100%;
    height: 100%;
    background: #090910;
}
.public-container {
    background: #090910;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
    height: 100%;
    .main {
        height: 100%;
    }
    
    .table-content {
        display: flex;
        align-items: stretch;
        justify-content: center;
        .table-box2 {
            align-self: stretch;
            .title-td {
                background: #232429;
                text-align: left;
                padding-left: 17px;
                font-weight: bold;
            }
            .no-data {
                height: 100%;
                color: #bcbfc4;
            }
        }
    }
    .table-box {
        border-collapse: separate;
        border-spacing: 1px;
        td {
            //background: #25262a;
            background: #090910;
            text-align: center;
            box-sizing: border-box;
            font-size: 16px;
            font-weight: 400;
            padding: 9px 5px;
        }
        .title {
            font-size: 16px;
            color: #FF8A00;
            line-height: 26px;
            border-bottom:1px solid #25262A;
        }
        .holder {
            display: flex;
            justify-content: space-between;
            padding: 0 10px 11px 10px;
            line-height: 22px;
            &.holder-item {
                & > span {
                    color: #f4f636;
                }
            }
            &.holder-item,
            &.holder-head {
                font-size: 15px;
                color: #ff8900;
                & > span {
                    text-align: left;
                    font-size: 16px;

                    .org-label {
                        color: #fff;
                        display: inline-block;
                        padding: 3px 4px;
                        border-radius: 2px;
                        font-size: 13px;
                        line-height: 13px;
                        &.org-1 {
                            background: #052b6a;
                        }
                        &.org-2 {
                            background: #6a0508;
                        }
                        &.org-3 {
                            background: #6a3e05;
                        }
                    }

                    &.color-0 {
                        color: #f4f636;
                    }
                    &.color-1,
                    &.color-6 {
                        color: #bd0ef5;
                    }
                    &.color-2,
                    &.color-7 {
                        color: #ffa48c;
                    }
                    &.color-3,
                    &.color-8 {
                        color: #8cb4f7;
                    }
                    &.color-4,
                    &.color-9 {
                        color: #f54932;
                    }
                    &.color-5,
                    &.color-10 {
                        color: #e0e0e0;
                    }
                    &.turquoise {
                        color: #02e2f4;
                    }

                    &:nth-child(1) {
                        flex-basis: 40px;
                        color: #bcbfc4;
                        &.head-1 {
                            color: #ff8900;
                        }
                    }
                    &:nth-child(2) {
                        flex-basis: 40px;
                    }
                    &:nth-child(3) {
                        flex-basis: 150px;
                        flex-grow: 1;
                    }
                    &:nth-child(4) {
                        flex-basis: 80px;
                        text-align: right;
                    }
                }
            }
        }
    }
}
</style>
